<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    
</style>
<body>
    <div id="box1"></div>
    <li>a洒洒</li>
    <li>是</li>
    <li>对我的</li>
    <li>洒洒·</li>
    <li>丰富</li>



    <ol>
        <li>sas</li>
        <li>fwf</li>
        <li>gsrsr</li>
    </ol>
     
    <div class="box11" name="tw_div">唐玮</div>
    <div name="names">name查找</div>
    <script>
        //DOM获取元素
        //1.id获取 
       let div= document.getElementById("box1");//大小写敏感
       
       console.log(div);//返回是元素对象

        //2.标签名获取(全部的li获取出来)
    //    let lis= document.getElementsByTagName("li")//{数组的形式
    //   console.log(lis);
    //   console.log(lis[0]);

    //取父元素下的子元素getElementsByTagName(按标签获取元素)
         let ol=document.getElementsByTagName("ol");
         console.log(ol);
         console.log(ol[0].getElementsByTagName("li"));//父类的取子类的不能是伪元素
        //通过html5新增的方法(有浏览器兼容的问题)
        let divs=document.getElementsByClassName("box11");
        console.log(divs);

        //选择器()
        let div1 = document.querySelector("#box1");
        console.log(div1);
        let div2=document.querySelector(`[name="tw_div"]`);
        console.log(div2);
        let liss=document.querySelectorAll("ol li");
        
        console.log(liss);
        //特殊元素获取
        //body标签
        let body=document.body.innerHTML;
        console.log(body);
        //html标签
        let html = document.documentElement;
        console.log(html);
        

        //设置title
        document.title="唐玮学习docment";
        //获取当前网址
        console.log(document.URL);
        console.log(document.domain);//127.0.0.1
        console.log(document.referrer);

        //获取所有links images。....同理

        //name来查找
  let div_name=document.getElementsByName("names");
  console.log(div_name);
    </script>
</body>
</html>